<template>
	<div class="content">
		<search-date
			@getChangeTime="getChangeTime"
			:initTimeDatas="initTimeDatas"
		></search-date>
		<div class="btns">
			<el-button @click.native="getChart" data-name="first" autofocus="“true”"
				><span class=" iconfont" :class="{ active: activeName === 'first' }"
					>&#xe669;</span
				></el-button
			>
			<el-button @click.native="getTable" data-name="second"
				><span class=" iconfont" :class="{ active: activeName !== 'first' }"
					>&#xe66a;</span
				></el-button
			>
		</div>
		<!-- 图表-->
		<div id="chart" v-show="showChart === true">
			<section>
				<el-row>
					<el-col :span="24" class="item">
						<span class="title">医生调阅量</span>
						<span class="title">医生站调阅：{{ doctorStatics.val_doc }}</span>
						<span class="title">H5调阅：{{ doctorStatics.val_h5 }}</span>
						<span class="title">WEB调阅：{{ doctorStatics.val_web }}</span>
						<span class="title">微信调阅：{{ doctorStatics.val_vx }}</span>
						<span class="title">APP调阅：{{ doctorStatics.val_app }}</span>
						<span class="title">总体调阅：{{ doctorStatics.sum }}</span>
					</el-col>
				</el-row>

				<el-row>
					<!-- <search-date @getTime="getTimeDate"></search-date> -->
				</el-row>

				<el-row id="c1" :style="{ height: scrollerHeight }">
					<stack-barPlot
						:chartObj="chartObj1"
						:chart-data="chartObj1.data"
						key="doctorChart"
						ref="doctorChart"
					></stack-barPlot>
				</el-row>
			</section>
			<section>
				<el-row>
					<el-col :span="24" class="item">
						<span class="title">患者访问量</span>
						<span class="title">H5访问：{{ patientStatics.val_h5 }}</span>
						<span class="title">WE访问：{{ patientStatics.val_web }}</span>
						<span class="title">微信问：{{ patientStatics.val_vx }}</span>
						<span class="title">APP访问：{{ patientStatics.val_app }}</span>
						<span class="title">总体访问：{{ patientStatics.sum }}</span>
					</el-col>
				</el-row>
				<el-row id="c2" :style="{ height: scrollerHeight }">
					<stack-barPlot
						:chartObj="chartObj2"
						:chart-data="chartObj2.data"
						key="patientChart"
						ref="patientChart"
					></stack-barPlot>
				</el-row>
				<el-row></el-row>
			</section>
		</div>
		<div id="tableList" v-show="showList === true">
			<section>
				<el-row>
					<h2>医生调阅量</h2>
				</el-row>
				<my-table
					:table-data="tableDataDoctor"
					:col-configs="colConfigs"
					:list-loading="listLoading"
					:total="total"
					:page-size="listQuery.pagesize"
					@refreshList="getDoctorList"
				/>
			</section>
			<section>
				<el-row>
					<h2>患者调阅量</h2>
				</el-row>
				<my-table
					:table-data="tableDataPatient"
					:col-configs="col_configs_patient"
					:list-loading="listLoading"
					:total="total"
					:page-size="listQuery.pagesize"
					@refreshList="getPatientList"
				/>
			</section>
		</div>
	</div>
</template>

		<script>
import myTable from '@/components/myTable'
import searchDate from '@/components/common/searchDate'
import stackBarPlot from './components/stackChart.vue'
import { get_region_readership, get_region_patient_readership } from '@/api/admin'
import { getDoctorData, getReadPatientData } from '@/api/data-watch'
import { groupBy, clone, compareArray, objSum } from '@/utils/base.js'
import { mapGetters } from 'vuex'
export default {
	name: 'dataRead',
	components: {
		myTable,
		stackBarPlot,
		searchDate,
	},
	data () {
		return {
			initTimeDatas: [
				{
					text: '不限',
					code: 'allTime',
				},
				{
					text: '昨天',
					code: 'lastDay',
				},
				{
					text: '最近一周',
					code: 'lastOneWeek',
				},
				{
					text: '最近一月',
					code: 'lastOneMonth',
				},

			],
			colConfigs: [
				{
					prop: 'depart_name',
					label: '科室',
				},
				{
					prop: 'val_doc',
					label: '医生站',
				},
				{
					prop: 'val_app',
					label: 'APP',
				},
				{
					prop: 'val_vx',
					label: '微信',
				},
				{
					prop: 'val_web',
					label: '网站',
				},
				{
					prop: 'val_h5',
					label: 'H5',
				},
				{
					prop: 'sum',
					label: '总计',
				},
			],
			col_configs_patient: [
				{
					prop: 'depart_name',
					label: '科室',
				},
				{
					prop: 'val_app',
					label: 'APP',
				},
				{
					prop: 'val_vx',
					label: '微信',
				},
				{
					prop: 'val_web',
					label: '网站',
				},
				{
					prop: 'val_h5',
					label: 'H5',
				},
				{
					prop: 'sum',
					label: '总计',
				},
			],
			tableDataDoctor: [],
			tableDataPatient: [],
			total: null,
			listLoading: false,
			clearTime: false,
			showChart: true,
			showList: false,
			chartId: 'c1',
			chartId2: 'c2',
			initTime: [],
			listQuery: {
				start_date: null,
				end_date: null,
			},
			chartObj1: {
				chartId: 'c1',
				data: [],
			},
			chartObj2: {
				chartId: 'c2',
				data: [],
			},
			client_kind_list: [
				{ client_kind: 1, label: '医生站', props: 'val_doc' },
				{ client_kind: 2, label: 'APP', props: 'val_app' },
				{ client_kind: 3, label: '微信', props: 'val_vx' },
				{ client_kind: 4, label: '网站', props: 'val_web' },
				{ client_kind: 5, label: 'H5页面', props: 'val_h5' },
			],
			activeName: 'first',
			doctorStatics: {
				val_h5: 0,
				val_web: 0,
				val_vx: 0,
				val_app: 0,
				val_doc: 0,
				sum: 0
			},
			patientStatics: {
				val_h5: 0,
				val_web: 0,
				val_vx: 0,
				val_app: 0,
				sum: 0
			},
		}
	},
	computed: {
		scrollerHeight () {
			return `${ ( window.innerHeight - 235 ) / 2 }px`
		},
		...mapGetters( [ 'roleValue' ] ),
		...mapGetters( [ 'org_code' ] )
	},
	created () {
		this.getChangeTime()
	},
	mounted () {
	},
	methods: {
		getChangeTime ( val ) {
			// 获取时间
			this.listQuery = Object.assign( this.listQuery, val )
			this.getDoctorList()
			this.getPatientList()
		},
		async	getDoctorList () {
			// 获取医生
			let data = { user_kind: 1, exam_org_code: localStorage.getItem( 'org_code' ) }
			let params = Object.assign( this.listQuery, data )
			getDoctorData( params ).then( res => {
				if ( res.code === 0 && res.data.length > 0 ) {
					debugger
					//  表格数据清洗
					let _data = this.formatData( res.data )
					this.tableDataDoctor = _data.tableData
					//绘图
					this.chartObj1.data = _data.chartData
					this.$refs.doctorChart.rePaintChart( _data.chartData )
					this.doctorStatics = _data.statics
				}
			} )
		},
		async	getPatientList () {
			let data = { user_kind: 2, exam_org_code: localStorage.getItem( 'org_code' ) }
			let params = Object.assign( this.listQuery, data )
			getReadPatientData( params ).then( res => {
				if ( res.code === 0 ) {
					debugger
					//  表格数据清洗
					let data = this.formatData( res.data )
					this.tableDataPatient = data.tableData
					// todo绘图
					this.chartObj2.data = data.chartData
					this.$refs.patientChart.rePaintChart( data.chartData )
				}
			} )
		},
		getDoctorChart ( data ) {
			// 存储数量统计
			this.chartObj1 = {
				chartId: 'c1',
				data: this.barData, // 数组对象
				titleText: '存储内容数量统计',
				desText: '单位: 万', // 描述文本
				field: {
					xField: '科室',
					yField: '调阅量',
					stackField: '分类',
				},
			}
		},
		getPatient () {
			// 存储容量统计
			this.chartObj2 = {
				chartId: 'c2',
				data: this.barData, // 数组对象
				titleText: '存储内容容量统计',
				desText: '单位: 万', // 描述文本
				field: {
					xField: '使用量',
					yField: '类别',
				},
			}
		},
		getSummaries ( val ) {
			const { columns, data } = val
			const sums = []
			columns.forEach( ( column, index ) => {
				console.log( index );
				if ( index === 0 ) {
					sums[ index ] = '总计'
				} else if ( index === 5 || index === 6 ) {
					const values = data.map( item => Number( item[ column.property ] ) )
					if ( !values.every( value => isNaN( value ) ) ) {
						sums[ index ] = values.reduce( ( prev, curr ) => {
							const value = Number( curr )
							if ( !isNaN( value ) ) {
								return prev + curr
							} else {
								return prev
							}
						}, 0 )
					} else {
						sums[ index ] = 'N/A'
					}
				} else {
					sums[ index ] = '--'
				}
			} )
			return sums


		},
		formatData ( Array ) {
			let res = { tableData: [], chartData: [], statics: {} }
			let titleObj = {}

			Array.map( item => {
				let list = item.detail_list
				let obj = {
					val_doc: 0,
					val_app: 0,
					val_vx: 0,
					val_web: 0,
					val_h5: 0,
					sum: 0
				}

				list.map( ( list ) => {
					list.depart_name = item.depart_name
					list.depart_code = item.depart_code
					obj.depart_name = item.depart_name
					obj.depart_code = item.depart_code
					this.client_kind_list.map( ( kind ) => {
						if ( kind.client_kind === list.client_kind ) {
							obj[ kind.props ] = list.count * 1
							list.props = kind.label
						} else {
							return
						}
					} )
					res.chartData.push( list )
				} )
				obj.sum = obj.val_doc + obj.val_app + obj.val_vx + obj.val_web + obj.val_h5
				res.tableData.push( obj )
			} )
			titleObj = objSum( res.tableData, 'val_doc', 'val_app', 'val_vx', 'val_web', 'val_h5', 'sum' )
			res.statics = titleObj
			console.log( res.tableData );
			console.log( titleObj );
			return res
		},
		getChart () {
			this.showChart = true
			this.showList = false
			this.activeName = 'first'
		}, getTable () {
			this.showList = true
			this.showChart = false
			this.activeName = 'second'
		}
	},
	watch: {},
	filter: {},
}
</script>
<style scoped lang="less">
.content {
	padding-left: 20px;
	#tableList > :first-child h2 {
		margin-top: 0;
	}
	// .btns {
	// 	position: absolute;
	// 	right: 0;
	// 	top: 145px;
	// 	z-index: 888888;
	// }
	i {
		color: #fff;
		opacity: 1;
	}
	h2 {
		height: 25px;
		font-size: 18px;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		line-height: 25px;
		margin: 30px 0;
	}
	.item {
		margin: 10px;
		span {
			display: inline-block;
			margin-right: 2.5%;
			font-size: 14px;
		}
		> :nth-child(1) {
			font-size: 18px;
			color: @333;
			font-weight: 500;
		}
		> :nth-child(2) {
			color: @1C8BE4;
		}
		> :nth-child(3) {
			color: @EF8900;
		}
		> :nth-child(4) {
			color: @5660A9;
		}
		> :nth-child(5) {
			color: @333;
		}
	}
	.el-button {
		border: 0px;
	}
	.btns {
		position: absolute;
		right: 30px;
		z-index: 100;
	}
	.active {
		color: #0a70b0;
		text-decoration: underline;
	}
}
</style>
